<script setup lang="ts">
import { ref, watch } from "vue";
import { onLoad, onPullDownRefresh, onReachBottom, onPageScroll } from "@dcloudio/uni-app";
import { useInfiniteScroll } from "@/composables/useInfiniteScroll";
import { getList, type GoodsInfo } from "@/api/goods";
import { handleToPage } from "@/utils";

const { items: list, isLoading, hasMore, error, resetAndLoad, loadMore } = useInfiniteScroll<GoodsInfo>(getList);

/** 查询参数  */
const queryParams = ref({});

watch(queryParams, (newQueryParams) => {
  console.log("Query Params changed:", newQueryParams);
  resetAndLoad(newQueryParams);
}, { deep: true });

// 页面加载
onLoad(() => {
  resetAndLoad(queryParams.value);
});

// 监听用户下拉动作
onPullDownRefresh(() => {
  resetAndLoad(queryParams.value).finally(() => {
    // 停止当前页面下拉刷新
    uni.stopPullDownRefresh();
  });
});

// 页面滚动到底部的事件
onReachBottom(() => loadMore());

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
  <view class="relative overflow-hidden">
    <page-navbar title="兑换大厅" :hideTitle="true" :isScrolled="isScrolled"></page-navbar>

    <page-title title="兑换大厅"></page-title>

    <page-list :list="list" :hasMore="hasMore" :isLoading="isLoading" :loadMore="loadMore">
      <view class=" mx-4 mt-5 grid gap-3 grid-cols-2">
        <view class="bg-white rounded-lg pb-3 grid gap-2 shadow" v-for="item in list" :key="item.id" @click="handleToPage(`/pages/goods/detail?id=${item.id}`)">
          <image class="w-full h-40 align-middle rounded-t-md bg-black" :src="`https://api.minglvtang.com${item.imgs}`" :fade-in="true" :lazy-load="true" mode="aspectFill" />
          <view class="mx-3 text-(sm black/80) font-500 truncate">{{ item.title }}</view>
          <view class="mx-3 text-(sm #EA3E3E) pt-2 border-t-(~ solid black/8)">{{ item.price == 0 ? '免费' : item.price }}</view>
        </view>
      </view>
    </page-list>
  </view>
</template>
